import React from "react";
import { Select } from "antd";

interface IVSelectProps {
    options: {
        text: string | React.ReactNode;
        value: any;
    }[],
    subComponent?: (option: any) => React.ReactNode;
    onChange?: (value: any) => void;
}

const VSelect: React.FC<IVSelectProps> = (props) => {
    const { options, subComponent, onChange, ...resetProps } = props;
    return <Select
        options={!subComponent ? options.map(item => ({
            label: item.text,
            value: item.value
        })) : undefined}
        style={{width: "100%"}}
        onChange={onChange}
        allowClear={true}
        getPopupContainer={(triggerNode) => triggerNode?.parentNode}
        {...resetProps}
    >
        {
            subComponent ? options.map(option => {
                return <Select.Option value={option.value} key={option.value}>
                    {subComponent(option)}
                </Select.Option>
            }) : null
        }
    </Select>
}

export default VSelect;